<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/8
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/hplus/css/bootstrap.min.css">
<link rel="stylesheet"
      href="${pageContext.request.contextPath}/static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(document).ready(function () {
        $("#usertb").bootstrapTable({
            url: "${pageContext.request.contextPath}//byname",
            pagination: true,
            height: 500,
            pageList: [5, 10, 100],
            pageSize: 5,
            sidePagination: "server",
            striped: true,
            /*后台传值*/
            queryParamsType: '',
            queryParams: query,
            columns: [
                {
                    field: "id",
                    title: "编号"
                }, {
                    field: "userName",
                    title: "姓名"
                }, {
                    field: "address",
                    title: "地址"
                }, {
                    field: "phone",
                    title: "手机号码"
                }, {field: "birthday", title: "出生日期"}, {
                    field: "gender",
                    title: "性别",
                    formatter: function (value, row, index) {
                        if (row.gender == 1) {
                            return "男"
                        } else {
                            return "女"
                        }
                    },
                }, {
                    title: "操作",
                    formatter: function (value, row, index) {
                        return "<button class='btn btn-primary' onclick='update(" + row.id + ")'>修改</button>"
                            + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                            + "<button class='btn btn-primary' onclick='del(" + row.id + ")'>删除</button>"
                    }
                }
            ]
        })
    })

    /*传值*/
    function query(params) {
        var temp = {
            'userName': $('#name').val(),
            'offset': params.pageNumber,
            'limit': params.pageSize
        }
        return temp;
    }

    //   条件查询
    function search() {
        var username = $('#name').val();
        $.ajax({
            url: "${pageContext.request.contextPath}//byname",
            data: {
                'userName': username,
                'offset': 1,
                'limit': 5
            },
            success: function (date) {
                $('#usertb').bootstrapTable('load', date)
            }
        })
    }

    //    删除
    function del(id) {
        var id = id;
        $.ajax({
            url: "${pageContext.request.contextPath}/del",
            data: {
                "id": id
            },
            success: function (date) {
                if (date > 0) {
                    alert("删除成功")
                }
                history.go(0);
            }
        })
    }

    /*修改*/
    function update(id) {
        userinfoid = id;
        var a = 0;
        var s = "";
        //    添加一个对话框
        $('#update1').modal("show");
        //    当模态框加载完成后,绑定数据
        $('#update1').on("shown.bs.modal", function () {
            if (++a == 1) {
                $.post('${pageContext.request.contextPath}/getAll', {"id": id}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var r = data[i];
                        //获取职位ID
                        var id = r.id;
                        //获取职位
                        var name = r.roleName;
                        //是否选中
                        var ischecked = r.ischecked;
                        if (ischecked) {
                            s = s + "  <div  class=\"radio-inline\"> <input name='js' type='radio' checked  value=" + id + ">  <label>" + name + "</label></div>"
                        } else {
                            s = s + "  <div  class=\"radio-inline\"> <input name='js' type='radio'  value=" + id + ">  <label>" + name + "</label></div>"
                        }
                    }
                    $('#updatebody').html(s)
                })
            }
        })
    }

    //用户Id全局变量
    var userinfoid;

    //模态框修改用户职位
    function doupdate() {
        //获取用户id
        var userid = userinfoid;
        //获得职位id
        var userRole = $("input[name='js']:checked").val();
        //后台传值
        $.post("${pageContext.request.contextPath}//doFenPei", {"id": userid, "userRole": userRole}, function (data) {
            $("#update1").modal("hide");
            alert("修改成功");
            history.go(0);
        })
    }
</script>

<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">用户列表</h3></div>
</div>
<div class="panel-body">
    <form class="form-inline" style="float: right">
        <div class="form-group">
            <input type="text" id="name" class="form-control" placeholder="请输入关键词"/>
        </div>
        <button type="button" onclick="search()" class="btn btn-primary">查询</button>
    </form>
    <table id="usertb"></table>
    <!-- Modal -->
    <div class="modal fade" id="update1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" id="updatebody">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" onclick="doupdate()" class="btn btn-primary">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
